<template>
  <section class="main">
    <searchBar />
    <swicthBar />
    <goodlist />
    <a href="javascript:"
       class="toTop"></a>
  </section>
</template>
<script>
import searchBar from "../components/searchBar";
import swicthBar from "../components/swicthBar";
import goodlist from "../components/goodlist";
import $ from "../../node_modules/jquery/dist/jquery";
export default {
  data () {
    return {};
  },
  mounted () {
    $(".toTop").click(() => {
      $(".main")
        .stop()
        .animate(
          {
            scrollTop: 0
          },
          500
        );
    });
    $(".main").scroll(() => {
      if ($(".main").scrollTop > $(".swBar").offset()) {
        $(".swBar").addClass("fixed");
        $(".toTop").show();
      }
      if ($(".main").scrollTop() <= 0) {
        $(".swBar").removeClass("fixed");
        $(".toTop").hide();
      }
      if ($(".main").scrollTop() >= $(".goodlist").height() * 0.7) {
        if (this.$store.state.page < this.$store.state.totalPage) {
          this.$store.state.page++;
          this.$axios
            .get(
              `/goods/all?page=${this.$store.state.page}&type=${this.$store.state.type}`
            )
            .then(res => {
              res.data.list.forEach(item => {
                item.tag = JSON.parse(item.tag);
                this.$store.state.datalist.push(item);
              });
            });
        }
      }
    });
  },
  components: {
    searchBar,
    swicthBar,
    goodlist
  }
};
</script>
<style scoped>
.fixed {
  position: fixed;
  top: 0;
}
.toTop {
  display: block;
  width: 40px;
  height: 40px;
  background-image: url("../images/back-top.png");
  background-size: 100% 100%;
  position: fixed;
  right: 15px;
  bottom: 30px;
  display: none;
}
</style>